<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="A simple jQuery image cropping plugin.">
		<meta name="author" content="Chen Fengyuan">
		<title>Cropper</title>
		<script src="../../js/mui.js"></script>
		<link href="../../css/mui.css" rel="stylesheet" />

		<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->
		<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">-->
		<!--<link rel="stylesheet" href="css/cropper.css">-->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.min.css">
		
		<link rel="stylesheet" href="css/main.css">
		
		<style type="text/css">
			img {
			  max-width: 100%; /* This rule is very important, please do not ignore this! */
			}
		</style>
	</head>

	<body>

		<!-- Content -->
		<div class="">
			<!--<div class="row">
				<div class="col-md-9">-->
			<!-- <h3>Demo:</h3> -->
			<!--<div class="img-container">
				<img id="image" src="../../css/registLogin/arrow.jpg" alt="Picture">
			</div>-->
			<!--</div>
			</div>-->
			<div class="row">
				<div class="col-md-9 docs-buttons">

					<div class="btn-group btn-group-crop">
						<button type="button" class="btn btn-success" data-method="getCroppedCanvas">
								确认剪裁
          	</button>
          	<button id="btn_upload" type="button" class="btn btn-success">
								确认剪裁
          	</button>
					</div>

					<!-- Show the cropped image in modal -->
					<!--<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
								</div>
								<div class="modal-body"></div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
								</div>
							</div>
						</div>
					</div>-->
					<!-- /.modal -->
					
					<div>
					  <img id="image" src="../../css/registLogin/arrow.jpg">
					</div>

				</div>
				<!-- /.docs-buttons -->

			</div>
		</div>

		<!-- Scripts -->
		<script src="../../js/jquery-1.11.0.min.js"></script>
		<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>-->
		<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>-->
		<!--<script src="https://fengyuanchen.github.io/js/common.js"></script>-->
		<!--<script src="js/cropper.js"></script>-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.min.js"></script>
		<!--<script src="js/main.js"></script>-->

		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function(){
				
				var $image = $('#image');

				// 3.0
//				$image.cropper({
//				  aspectRatio: 1 / 1,
//				  preview: '.img-preview',
//				  crop: function(event) {
//				  }
//				});
				
				// Get the Cropper.js instance after initialized
//				var cropper = $image.data('cropper');

				var cropper = new Cropper(image, {
		        aspectRatio: 1 / 1,
		        viewMode:1,
		        crop: function (e) {
		        }
		    });

				
				
				var btn_upload = document.getElementById("btn_upload");
				btn_upload.addEventListener("tap", function(){
					
					$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
						console.log(blob)
					});
					
//					var result = $image.cropper(cropper.method, cropper.option, cropper.secondOption);
//					var uploadedImageType = 'image/jpeg';
//					console.log(typeof(result))
//					var base64Url = result.toDataURL(uploadedImageType);
//					console.log(base64Url)
				});
				
//				var rrr = btn_upload.click();
//				console.log(rrr);
				
//				mui.ajax(app.serverUrl + '/u/uploadFaceBase64?userid=1001&faseData=' + base64Url, {
//					dataType: 'json', //服务器返回json格式数据
//					type: 'post', //HTTP请求类型
//					timeout: 5000, //超时时间设置为10秒；
//					headers: {
//						'Content-Type': 'application/json'
//					},
//					success: function(data) {
//						//服务器返回响应，根据响应结果，分析是否登录成功；
//						console.log(JSON.stringify(data));
//
//						if(data.status == 200) {
//							// 成功
//						} else {
//							app.showToast(data.msg, "error");
//						}
//						
//					}
//				});
			});
			
			
		</script>
	</body>

</html>